<template>
  <el-container>
    <el-header height="80px">Header</el-header>
    <el-main>Main</el-main>
    <el-footer  height="180px">
        <div class="footer-header">Footer</div>
        <div class="copy">版权</div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "Login",
};
</script>

<style scoped lang="scss">
.el-container{
    height: 100%;
}

.el-header,
.el-main,
.el-footer>div{
    padding: 0 calc((100% - 1200px)/2);
}

.el-header {
    // height: 80px !important;
  background-color: #0080c9;
}

.el-main {
    flex:1;
    min-height: 440px;
  background-color: #cbccd4;
}

.el-footer {
  height: 180px !important;
  padding: 0;
  background-color: #0080c9;
}

.footer-header{
    height: 150px;
}
.copy{
    height: 30px;
    background-color: #000000;
}
</style>